
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useMeta } from '@/stores'
import KeepAlive, { useAliveController } from 'react-activation'
import { Button } from 'antd-mobile'
import styles from './index.module.less'

const Home = (props: any) => {

  const [count, setCount] = useState<number>(0)

  const navigate = useNavigate()

  const toUIPage = () => {
    navigate('/second-page/ui')
  }

  return <div className={styles.Home}>
    <div>count: {count}</div>
    <Button onClick={() => setCount(count + 1)} size='small'>add</Button>
    <Button onClick={toUIPage} size='small'>to UI Page</Button>
  </div>
}

// export default Home

const KeepAliveComponent = (props: any) => {

  const { setMeta } = useMeta((state) => state)

  useEffect(() => {
    setMeta('首页', 'menu-page')
  }, [])

  // const { dropScope } = useAliveController()

  return <KeepAlive name='home' key='home'>
    <Home {...props} />
  </KeepAlive>
}


export default KeepAliveComponent
